<template>
  <div class="hpv">
    <div class="green">
      <van-icon name="wap-home-o" class="goods" @click="backToHome"
        ><span>&nbsp;HPV疫苗现货</span></van-icon
      >
      <div>HPV疫苗现货专区</div>
      <span>15天内可约</span>
      <div class="book">
        <!-- 黄色遮罩框 -->
        <van-button type="primary" @click="show = true" class="first">
          <span>现货承诺</span>
          <div>承诺时间接种·超期必赔>></div>
        </van-button>
        <van-overlay :show="show" @click="show = false">
          <template #default>
            <h1>现货承诺</h1>
            <div>
              &emsp;现货定义 符合0-15天内可预约的商品，平台认可为现货商品。
              若因商家原因未在承诺时间内安排预约和接种，商家需赔付消费者
              100元起。具体规则
              24小时可约消费者支付后，商家需要在1个工作日内帮消费者预约成功，预约成功当日起3个工作日内可接种首针。
              7天内可约消费者支付后，商家需要在7个工作日内帮消费者预约成功，预约成功当日起7个工作日内可接种首针。
              15天内可约消费者支付后，商家需要在15个工作日内帮消费者预约成功，预约成功当日起7个工作日内可接种首针。15天内可約消费者支付后，商家需要在15个工作日内帮消费者预约成功，预约成功当日起15个工作日内可接种首針。备注：若商家在承诺期限内联系您安排预约接种，因法按时接种，则商家无责，消费者不享受赔付。
            </div>
          </template>
        </van-overlay>
        <van-button type="primary" @click="show = true">
          <span>平台保障</span>
          <div>随时退·保正品·机构认证>></div>
        </van-button>
        <van-overlay :show="show" @click="show = false">
          <template #default>
            <h1>平台保障</h1>
            <div>
              &emsp;现货定义 符合0-15天内可预约的商品，平台认可为现货商品。
              若因商家原因未在承诺时间内安排预约和接种，商家需赔付消费者
              100元起。具体规则
              24小时可约消费者支付后，商家需要在1个工作日内帮消费者预约成功，预约成功当日起3个工作日内可接种首针。
              7天内可约消费者支付后，商家需要在7个工作日内帮消费者预约成功，预约成功当日起7个工作日内可接种首针。
              15天内可约消费者支付后，商家需要在15个工作日内帮消费者预约成功，预约成功当日起7个工作日内可接种首针。15天内可約消费者支付后，商家需要在15个工作日内帮消费者预约成功，预约成功当日起15个工作日内可接种首針。备注：若商家在承诺期限内联系您安排预约接种，因法按时接种，则商家无责，消费者不享受赔付。
            </div>
          </template>
        </van-overlay>
      </div>
    </div>

    <!-- 选择天数 -->
    <van-tabs class="list" @change="handleChange">
      <van-tab title="全部">
        <van-list v-for="value in alls" :key="value.id">
          <div class="big">
            <h3>{{ value.hospital }}</h3>
            <span>{{ value.address }}</span>
            <div>{{ value.house }}</div>
            <div class="fk">
              <span>门店直营</span>
              <span>下单即约</span>
              <span>7天内可约</span>
            </div>
            <div class="text">
              <span>{{ value.price }}</span>
              <span class="data">已约9999</span><br />
              <button>立即下单</button>
            </div>
          </div>
        </van-list>
      </van-tab>
      <van-tab title="24小时可约">
        <van-list v-for="value in hours" :key="value">
          <div class="big">
            <h3>{{ value.hospital }}</h3>
            <span>{{ value.address }}</span>
            <div>{{ value.house }}</div>
            <div class="fk">
              <span>门店直营</span>
              <span>下单即约</span>
              <span>7天内可约</span>
            </div>
            <div class="text">
              <span>{{ value.price }}</span>
              <span class="data">已约9999</span><br />
              <button>立即下单</button>
            </div>
          </div>
        </van-list>
      </van-tab>
      <van-tab title="7天可约">
        <van-list v-for="value in seven" :key="value">
           <div class="big">
            <h3>{{ value.hospital }}</h3>
            <span>{{ value.address }}</span>
            <div>{{ value.house }}</div>
            <div class="fk">
              <span>门店直营</span>
              <span>下单即约</span>
              <span>7天内可约</span>
            </div>
            <div class="text">
              <span>{{ value.price }}</span>
              <span class="data">已约9999</span><br />
              <button>立即下单</button>
            </div>
          </div>
        </van-list>
      </van-tab>
      <van-tab title="15天可约">
        <van-list v-for="value in five" :key="value">
          <div class="big">
            <h3>{{ value.hospital }}</h3>
            <span>{{ value.address }}</span>
            <div>{{ value.house }}</div>
            <div class="fk">
              <span>门店直营</span>
              <span>下单即约</span>
              <span>7天内可约</span>
            </div>
            <div class="text">
              <span>{{ value.price }}</span>
              <span class="data">已约9999</span><br />
              <button>立即下单</button>
            </div>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script lang='ts' setup>
import { ref, onMounted, onBeforeMount } from "vue";
import { allHpv, hoursHpv, sevenHpv, fiveHpv } from "../../api/userDoctor";
const backToHome = () => {
  history.back();
};

let alls = ref("");
let hours = ref("");
let seven = ref("");
let five = ref("");
const show = ref(false);

// 加载全部数据
onBeforeMount(() => {
  const result: any = allHpv().then((res) => {
    console.log(res);
    alls.value = res.list;
  });
});

//点击每个标签获取数据
const handleChange = (e: any) => {
  console.log(e);
  if (e === 1) {
    const result: any = hoursHpv().then((res) => {
      console.log(res);
      hours.value = res.list;
    });
  }
  if (e === 2) {
    const result: any = sevenHpv().then((res) => {
      console.log(res);
     seven.value = res.list;
    });
  }
   if (e === 3) {
    const result: any = fiveHpv ().then((res) => {
      console.log(res);
       five.value = res.list;
    });
  }
};
</script>


<style lang='less' scoped>
.green {
  background-color: rgb(97, 218, 103);
  padding: 15px;
  height: 230px;
  .goods {
    color: rgb(24, 24, 24);
    font-size: 18px;
    margin-top: 16px;
    span {
      color: azure;
    }
  }
  div {
    color: azure;
    margin: 10px 0px;
    font-size: 25px;
    font-weight: 600;
  }
  span {
    color: azure;
  }
  .book {
    :deep(.van-button--primary) {
      background-color: #c3c459;
      height: 90px;
      width: 160px;
      float: left;
    }

    .first {
      margin-right: 20px;
    }
    span {
      color: azure;
      margin: 10px 0px;
      font-size: 20px;
      font-weight: 600;
    }
    div {
      color: azure;
      margin: 10px 0px;
      font-size: 15px;
      font-weight: 200;
    }
  }
}
.list {
  padding: 15px;
  padding-top: 1px;
  .big {
    border-top: 1px solid;
    height: 210px;
    padding: 5px;
    padding-top: 0px;
  }
  h3 {
    margin-top: 18px;
    margin-bottom: 10px;
  }
  span {
    font-size: 15px;
    color: rgb(163, 163, 153);
  }
  div {
    font-size: 18px;
    color: rgb(25, 25, 23);
    margin-top: 10px;
  }
  .fk {
    span {
      border: 1px solid #e25a11;
      margin-right: 10px;
      color: #e25a11;
    }
  }
  .text {
    :first-child {
      color: #c71f13;
      font-size: 25px;
    }
    .data {
      float: right;
    }
    button {
      float: right;
      background-color: #f2ae10;
      border: 1px solid #f2ae10;
      border-radius: 10px;
      color: aliceblue;
    }
  }
  margin-bottom: 30px;
}
</style>
